<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ course.title }} - 智能学习平台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <style>
        .navbar {
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .rating {
            color: #ffc107;
        }
        .module-item {
            border-bottom: 1px solid #eee;
            padding: 1rem 0;
        }
        .module-item:last-child {
            border-bottom: none;
        }
        .course-img {
            height: 250px;
            object-fit: cover;
            border-radius: 8px;
        }
        .enroll-btn {
            transition: all 0.3s;
        }
        .enroll-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 10px rgba(0, 123, 255, 0.2);
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="fa fa-graduation-cap text-primary me-2"></i>
                智能学习平台
            </a>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/">首页</a>
                    </li>
                    {% if user %}
                        {% if user.role == 'teacher' %}
                            <li class="nav-item">
                                <a class="nav-link" href="/teacher/dashboard">教师中心</a>
                            </li>
                        {% else %}
                            <li class="nav-item">
                                <a class="nav-link" href="/student/dashboard">我的学习</a>
                            </li>
                        {% endif %}
                    {% endif %}
                </ul>
                <div class="navbar-nav">
                    {% if user %}
                        <span class="nav-item nav-link">欢迎，{{ user.name }}</span>
                        <a class="nav-link" href="/logout" onclick="event.preventDefault(); fetch('/logout').then(() => window.location.href='/')">
                            <i class="fa fa-sign-out me-1"></i>退出登录
                        </a>
                    {% else %}
                        <a class="nav-link" href="/login">
                            <i class="fa fa-sign-in me-1"></i>登录
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </nav>

    <div class="container mt-5">
        <div class="row">
            <!-- 课程封面与基本信息 -->
            <div class="col-md-4">
                <img src="https://picsum.photos/seed/course{{ course.id }}/600/400" class="course-img" alt="{{ course.title }}">
                <div class="mt-4">
                    <h5>课程难度</h5>
                    <span class="badge bg-secondary">{{ course.difficulty }}</span>

                    <h5 class="mt-3">课程标签</h5>
                    {% for tag in course.tags %}
                        <span class="badge bg-primary me-1">{{ tag }}</span>
                    {% endfor %}

                    <h5 class="mt-3">相关课程</h5>
                    <ul class="list-unstyled">
                        {% for rel_course in related_courses %}
                            <li><a href="/course/{{ rel_course.id }}">{{ rel_course.title }}</a></li>
                        {% else %}
                            <li>暂无相关课程</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>

            <!-- 课程详情与操作 -->
            <div class="col-md-8">
                <h1>{{ course.title }}</h1>
                <div class="rating mb-3">
                    {% for i in range(5) %}
                        {% if i < course.rating | int %}★{% else %}☆{% endif %}
                    {% endfor %}
                    <span class="text-dark">{{ course.rating }} ({{ reviews | length }} 评价)</span>
                </div>

                <div class="mb-4">
                    <span class="badge bg-info me-2">报名人数：{{ course.enrollment_count }}</span>
                    <span class="badge bg-success">完课率：{{ course.completion_rate }}%</span>
                </div>

                <h4>课程描述</h4>
                <p class="mb-5">{{ course.description }}</p>

                <!-- 学习进度（仅学生可见） -->
                {% if user and user.role == 'student' %}
                    <div class="mb-5">
                        <h4>您的学习进度</h4>
                        <div class="progress" style="height: 25px;">
                            <div class="progress-bar" role="progressbar" style="width: {{ progress }}%" aria-valuenow="{{ progress }}" aria-valuemin="0" aria-valuemax="100">
                                {{ progress }}%
                            </div>
                        </div>
                    </div>
                {% endif %}

                <!-- 课程模块 -->
                <h4>课程模块</h4>
                <div class="modules-list mb-5">
                    {% for module in course.modules %}
                    <div class="module-item">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5>模块 {{ module.id }}：{{ module.title }}</h5>
                            <span class="text-muted">时长：{{ module.duration }} 分钟</span>
                        </div>
                    </div>
                    {% endfor %}
                </div>

                <!-- 操作按钮 -->
                <div class="d-flex gap-3">
                    {% if user and user.role == 'student' %}
                        {% if is_enrolled %}
                            <a href="#" class="btn btn-secondary">已加入课程</a>
                            <a href="#" class="btn btn-primary">继续学习</a>
                        {% else %}
                            <button id="enrollBtn" class="btn btn-primary enroll-btn">
                                <i class="fa fa-plus me-2"></i>加入课程
                            </button>
                        {% endif %}
                    {% endif %}
                    <a href="/" class="btn btn-outline-secondary">返回首页</a>
                </div>

                <div class="notes-section mt-4">
    <h3>学习笔记</h3>

    <!-- 笔记列表 -->
    <div id="notes-list">
        {% for module_id, module_notes in notes.items() %}
        <div class="module-notes mb-4">
            <h5>{{ course.modules[module_id-1].title }}</h5>
            {% for note in module_notes %}
            <div class="card mb-2">
                <div class="card-body">
                    <p class="card-text">{{ note.content }}</p>
                    <small class="text-muted">{{ note.created_at }}</small>
                    <button class="btn btn-sm btn-outline-danger float-right delete-note"
                            data-course-id="{{ course.id }}"
                            data-module-id="{{ module_id }}"
                            data-note-id="{{ note.id }}">
                        删除
                    </button>
                </div>
            </div>
            {% endfor %}

            <!-- 添加笔记表单 -->
            <div class="add-note-form mt-2">
                <textarea class="form-control mb-2 note-content"
                          placeholder="添加笔记..."
                          data-module-id="{{ module_id }}"></textarea>
                <button class="btn btn-primary btn-sm add-note"
                        data-course-id="{{ course.id }}"
                        data-module-id="{{ module_id }}">
                    添加笔记
                </button>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

                <!-- 评价区 -->
                <div class="mt-5">
                    <h4>课程评价</h4>

                    <!-- 提交评价（仅学生且已选课可见） -->
                    {% if user and user.role == 'student' and is_enrolled %}
                    <div class="card mb-4">
                        <div class="card-body">
                            <h5 class="card-title">发表评价</h5>
                            <form id="reviewForm">
                                <div class="mb-3">
                                    <label>评分</label>
                                    <div class="rating">
                                        {% for i in range(1,6) %}
                                        <input type="radio" name="rating" id="star{{i}}" value="{{i}}" required style="display:none">
                                        <label for="star{{i}}" style="cursor:pointer">★</label>
                                        {% endfor %}
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <textarea class="form-control" name="comment" rows="3" placeholder="请输入您的评价..."></textarea>
                                </div>
                                <button type="submit" class="btn btn-primary">提交评价</button>
                            </form>
                        </div>
                    </div>
                    {% endif %}

                    <!-- 评价列表 -->
                    {% if reviews %}
                        {% for review in reviews %}
                        <div class="card mb-3">
                            <div class="card-body">
                                <div class="d-flex justify-content-between">
                                    <h6>匿名用户</h6>
                                    <small class="text-muted">{{ review.date }}</small>
                                </div>
                                <div class="rating mb-2">
                                    {% for i in range(review.rating) %}★{% endfor %}
                                </div>
                                <p class="card-text">{{ review.comment }}</p>
                            </div>
                        </div>
                        {% endfor %}
                    {% else %}
                        <p>暂无评价，来发表第一条评价吧！</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>



    <footer class="bg-dark text-white py-5 mt-8">
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-4">
                    <h5>关于我们</h5>
                    <p>智能学习平台致力于提供高质量的在线教育资源，助力每一位学习者成长。</p>
                </div>
                <div class="col-md-4 mb-4">
                    <h5>快速链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="/" class="text-white">首页</a></li>
                        <li><a href="/login" class="text-white">登录</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h5>联系我们</h5>
                    <p>邮箱: contact@example.com</p>
                </div>
            </div>
            <div class="border-top pt-3 mt-4 text-center">
                <p>&copy; 2025 智能学习平台 版权所有</p>
            </div>
        </div>
    </footer>

    <script>
$(document).ready(function() {
    // 添加笔记
    $('.add-note').click(function() {
        const courseId = $(this).data('course-id');
        const moduleId = $(this).data('module-id');
        const content = $(this).closest('.add-note-form').find('.note-content').val().trim();

        if (!content) {
            alert('笔记内容不能为空');
            return;
        }

        $.ajax({
            url: `/api/course/${courseId}/module/${moduleId}/note`,
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ content: content }),
            success: function(response) {
                if (response.success) {
                    location.reload(); // 刷新页面显示新笔记
                } else {
                    alert(response.message);
                }
            }
        });
    });

    // 删除笔记
    $('.delete-note').click(function() {
        const courseId = $(this).data('course-id');
        const moduleId = $(this).data('module-id');
        const noteId = $(this).data('note-id');

        if (confirm('确定要删除这条笔记吗？')) {
            $.ajax({
                url: `/api/course/${courseId}/module/${moduleId}/note/${noteId}`,
                type: 'DELETE',
                success: function(response) {
                    if (response.success) {
                        location.reload(); // 刷新页面
                    } else {
                        alert(response.message);
                    }
                }
            });
        }
    });
});
</script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 选课功能
        document.getElementById('enrollBtn')?.addEventListener('click', function() {
            const courseId = {{ course.id }};
            fetch(`/course/${courseId}/enroll`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' }
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    window.location.reload();
                } else {
                    alert(data.message);
                }
            });
        });


        // 评价提交功能
        document.getElementById('reviewForm')?.addEventListener('submit', function(e) {
            e.preventDefault();
            const courseId = {{ course.id }};
            const formData = new FormData(this);
            const data = {
                rating: parseInt(formData.get('rating')),
                comment: formData.get('comment')
            };

            fetch(`/api/course/${courseId}/review`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(data)
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    alert('评价提交成功！');
                    window.location.reload();
                } else {
                    alert(data.message);
                }
            });
        });

        // 星级评分交互
        document.querySelectorAll('input[name="rating"]').forEach(radio => {
            radio.addEventListener('change', function() {
                document.querySelectorAll('input[name="rating"]').forEach(r => {
                    const label = document.querySelector(`label[for="${r.id}"]`);
                    if (r.checked || parseInt(r.value) < parseInt(this.value)) {
                        label.style.color = '#FFC107';
                    } else {
                        label.style.color = '#ccc';
                    }
                });
            });
        });
    </script>
</body>
</html>
